<template>
  <div v-loading="loading" class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="12">
        <div class="title">{{ form.projectName }} - {{
            form.restbreakMonth < 10 ? (form.restbreakYear + '-' + '0' +
              form.restbreakMonth) : form.restbreakYear + '-' + form.restbreakMonth
          }}月排休一览
        </div>
      </el-col>
    </el-row>
    <el-table :data="form.staffList" border height="1000">
      <el-table-column align="center" label="项目小组" prop="groupName" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.cld_project_groups" :value="scope.row.groupName"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="岗位编号" prop="projectPostNo" />
      <el-table-column align="center" label="岗位名称" prop="projectPostName" width="150">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.cld_project_post" :value="scope.row.projectPostName"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="员工姓名" prop="staffName" width="150">
        <template slot-scope="scope">
          <el-link v-if="Object.keys(scope.row.dayData).length != 0" type="primary"
                   @click="handleGetStaffView(scope.row)">{{ scope.row.staffName }}
          </el-link>
          <p v-else>{{ scope.row.staffName }}</p>
        </template>
      </el-table-column>
      <el-table-column v-for="item in form.calendarList" :key="item.calendarId" :label="item.calendayDay + '日'" align="center"
                       width="60">
        <template slot-scope="{ row }">
          <div v-if="row.dayData[item.calendayDate]" class="isScheduling-true">✔️</div>
          <div v-else class="isScheduling-false">-</div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 个人排休预览 -->
    <el-dialog :close-on-click-modal="false" :visible.sync="open" style="height:800px;" title="个人月度排休一览"
               width="70%">
      <el-descriptions :column="10" border>
        <el-descriptions-item label="岗位编号">{{ staffForm.projectPostNo }}</el-descriptions-item>
        <el-descriptions-item label="岗位名称">
          <dict-tag :options="dict.type.cld_project_post"
                    :value="staffForm.projectPostName"/>
        </el-descriptions-item>
        <el-descriptions-item label="员工姓名">{{ staffForm.staffName }}</el-descriptions-item>
        <el-descriptions-item label="班制">{{ staffForm.className }}</el-descriptions-item>
        <el-descriptions-item label="排休时间">{{
            form.restbreakMonth < 10 ? (form.restbreakYear + '-' + '0' +
              form.restbreakMonth) : form.restbreakYear + '-' + form.restbreakMonth
          }}
        </el-descriptions-item>
      </el-descriptions>
      <el-calendar :value="calendayDate">
        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
        <template slot="dateCell" slot-scope="{date, data}">
          <div v-if="staffForm[data.day]" class="isScheduling-div">
            <div class="isScheduling-div-date">{{ data.day.split('-').slice(1).join('-') }}</div>
            <div class="isScheduling-div-content">✔️</div>
          </div>
          <div v-else>
            <div class="isScheduling-div-date">{{ data.day.split('-').slice(1).join('-') }}</div>
          </div>
        </template>
      </el-calendar>
    </el-dialog>

  </div>
</template>

<script>
import {getCalendarByStaffId, getTableCalendarList} from '@/api/cld/restbreaks'

export default {
  name: "viewSchedule",
  dicts: ["cld_project_post", 'cld_project_groups'],
  data() {
    return {
      // 项目排休情况
      list: [],
      // 查询条件
      queryParams: {},
      // 排休id
      restbreakId: null,
      form: {
        restbreakYear: this.parseTime(new Date(), '{y}'),
        restbreakMonth: this.parseTime(new Date(), '{m}')
      },
      open: false,
      staffForm: {},
      loading: true,
      // 日历日期
      calendayDate: null
    };
  },
  created() {
    this.restbreakId = this.$route.params && this.$route.params.restbreakId;
    if (this.restbreakId && this.restbreakId != 0) {
      this.handleGetRestbreak();
    }
  },
  methods: {
    // 查询当月排休配置
    handleGetRestbreak() {
      getTableCalendarList(this.restbreakId).then(res => {
        this.form = res.data;
        this.loading = false;
      })
    },
    // 个人排休预览
    handleGetStaffView(row) {
      getCalendarByStaffId({
        restbreakId: row.restbreakId,
        staffId: row.staffId
      }).then(res => {
        this.calendayDate = this.form.restbreakYear + '-' + this.form.restbreakMonth;
        console.log(row)
        this.staffForm = res.data;
        this.open = true;
      })
    },
  },
};
</script>
<style scoped>
.el-select {
  width: 100%;
}

.title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: left;
  color: black;
}

::v-deep .el-calendar__header {
  display: none;
}

::v-deep .el-table .el-table__cell {
  padding: 0px;
  heihgt: 80px;
}

::v-deep .el-table--border .el-table__cell:first-child .cell {
  padding-left: 0px;
  padding-right: 0px;
}

::v-deep .cell {
  padding: 0px;
}

.isScheduling-true {
  height: 100%;
  line-height: 40px;
  padding: 0px;
  background-color: #e8f4ff;
  color: #1890ff;
}

.isScheduling-false {
  height: 100%;
  line-height: 40px;
  padding: 0px;
}

.isScheduling-div {
  background-color: #e8f4ff;
  height: 100%;
}

.isScheduling-div-date {
  padding-top: 5px;
  padding-left: 5px;
  text-align: left;
}

.isScheduling-div-content {
  color: #1890ff;
  height: 100%;
  line-height: 3;
  text-align: center;
}

::v-deep .el-calendar__body {
  padding: 0px;
}

::v-deep .el-descriptions-item__label {
  width: 100px;
}

::v-deep .el-descriptions-item__cell {
  text-algin: center;
}

::v-deep .el-descriptions-item__content {
  width: 12%;
  text-align: center;
}

::v-deep .el-calendar-day {
  padding: 0px;
}

/*::v-deep 深度选择器 修改class样式*/
::v-deep td.is-selected {
  background-color: #ffffff;
}

::v-deep .prev {
  background: #f6f6f6;
}

::v-deep .next {
  background: #f6f6f6;
}
</style>
